<template>
    <view>
        <u-navbar title="搜索" :background="background" back-icon-color="#efefef" title-color="#efefef"></u-navbar>
        <view class="wrap">
            <view class="search">
                <view class="searchInput">
                    <!-- <u-input v-model="value" type="text" border="true" placeholder-style="color: #555555"/> -->
                    <u-search :show-action="false" action-text="搜索" :animation="true" bg-color="#fffaf0" shape="square" v-model="searchWord" @search="search()">
                    </u-search>
                </view>
            </view>
            <view class="nosearch" v-if="eventList.length==0">
                暂无数据
            </view>
            <view v-for="(item,index) in eventList" :key="item.id">
                <view class="box" @click="goToOne(3,item.id)">
                    <view class="u-body-item u-flex">
                        <view class="main">
                            <view class="title u-line-2">{{ item.travelTitle }}</view>
                            <!--                    <view class="brief u-line-2">浙南（平阳）抗日根据地旧址
                        瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
                        </view> -->
                            <view class="footer">
                                <view class="siteauthor">{{item.travelAuthor}} </view>
                                <view class="sitetime">{{item.updateTime}}</view>
                            </view>
            
                        </view>
            
                        <!-- <image :src="filePath+item.cover" mode="aspectFill" @error="error(index)"></image> -->
                    </view>
                </view>
            </view>
            <!-- <view v-for="item in forumList" :key="item.id">
                <view class="f-main" @click="goMain(item.id,item.forumTitle)">
                    <view class="f-title">{{ item.forumTitle }}</view>
                    <view class="box">
                        <view class="Grid-cell u-1of3">
                            <u-icon :label="item.landlord" label-color="#626768" size="25" name="/static/icon/my.png">
                            </u-icon>
                        </view>
                        <view class="Grid-cell right-to">
                            <u-icon :label="item.updateTime" label-color="#626768" size="30"
                                name="/static/icon/time.png"></u-icon>
                        </view>
                        <view class="Grid-cell u-1of7 ">
                            <u-icon :label="item.commentNumber" label-color="#626768" size="30"
                                name="/static/icon/reply.png"></u-icon>
                        </view>
                    </view>
                    <u-line color="black" />
                </view>
            </view> -->

        </view>
    </view>
</template>

<script>
    import { getForums, selectForumByWord,getTravels,selectTravelByWord } from "@/api/data.js"
    export default {

        data() {
            return {
                background: {
                    backgroundImage: 'linear-gradient(45deg, rgb(255, 40, 0), rgb(147, 0, 0))'
                },
                forumList:[],
                searchWord: '',
                eventList:[],
            }
        },
        onLoad(options) {
            this.searchWord=options.searchword
        },
        onShow() {
            // this.getForums()
            this.search()
        },
        methods:{
            getTravels(){
                const _this = this
                getTravels().then(function(res) {
                    _this.eventList = res.data.data
                    // console.log(_this.siteList)
                })
            },
            search(){
                const _this=this
                console.log(this.searchWord)
                selectTravelByWord({
                    word: this.searchWord
                }).then(function(res){
                    _this.eventList=res.data.data
                })
                // selectForumByWord({
                //     word: this.searchWord
                // }).then(function(res){
                //     _this.forumList=res.data.data
                // })
            },
            goToOne(type,id) {
                console.log(id)
                uni.navigateTo({
                    url: '/pages/articles/index?id='+id+'&type='+type,
                });
            
            },
            goMain(id,title){
                
                
                
                // console.log(this.userInfo)
                // console.log("sd")
                uni.navigateTo({
                    url: '/pages/forum/main/index?id='+id+'&title='+title
                })
                // uni.navigateTo({
                //                 url: '/pages/articles/index',
                //             })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        background-color: #fffaf0;
        // background-color: #fff9ee;
    }

    .search {
        background-color: #333333;

        .searchInput {
            width: 95%;
            margin: 10rpx auto;
            // background-color: #b1b1b1;
        }
    }
    
    .nosearch {
        // margin-top: 200rpx;
        font-size: 50rpx;
        margin: 200rpx auto;
        color: #3F536E;
    }
    .box {
        padding: 20rpx 30rpx;
        // margin-top: 30rpx;
        margin-top: 20rpx;
        background: #fff;
        border: 3rpx solid #ddd;
        border-radius: 20rpx;
    }
    
    .u-body-item {
        // font-size: 28rpx;
        color: #424242;
    }
    
    // .u-body-item image {
    //     width: 220rpx;
    //     flex: 0 0 40%;
    //     height: 200rpx;
    //     border-radius: 8rpx;
    //     margin-left: 12rpx;
    // }
    
    .title {
        font-size: 38rpx;
        font-weight: bold;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
        max-height: 120rpx;
        color: #515151;
        letter-spacing: 5rpx;
        // height: 60%;
        // width: 70%;
    
    }
    
    .brief {
        font-size: 28rpx;
        color: #8e8e8e;
        margin-bottom: 10rpx;
    }
    
    .footer {
    
        // font-size: 30rpx;
        // color: #747474;
        .siteauthor {
            display: inline-block;
            font-size: 30rpx;
            color: #5a5a5a;
        }
    
        .sitetime {
            display: inline-block;
            font-size: 28rpx;
            color: #747474;
            margin-left: 20rpx;
        }
    
        // height: 20%;
    }
    
    .main {
        flex: 0 0 1;
    }
</style>
